<!--
 * @Description: 
 * @Author: chenjiaxin
 * @Date: 2020-03-02 22:56:22
 * @LastEditTime: 2022-05-23 21:57:02
 * @FilePath: \WebSkillExtend\01-rem布局分配方案\index-js.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>rem-动态获取设备尺寸</title>
    <script>
      (function (doc, win) {
        var docEle = doc.documentElement,
          evt = "orientationchange" in window ? "orientationchange" : "resize",
          //动态设置 html 字体大小 函数
          fun = function () {
            console.log(2);
            var width = docEle.clientWidth; //获取设备 视口的宽
            //如果效果图宽度是 640px。 则效果图中的 100px == 1rem
            //为了更好的计算效果图中的px单位转换 rem, 一般我们会 (width / 效果图宽度)
            width && (docEle.style.fontSize = 100 * (width / 640) + "px");
          };
        //监听事件
        win.addEventListener(evt, fun, false);
        doc.addEventListener("DOMContentLoaded", fun, false);
      })(document, window);
    </script>
    <style>
      .box {
        width: 1rem;
        height: 1rem;
        background-color: #f00;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
